// import React from 'react';
import React, { Component } from 'react';
import {
  Row,
  Col,
  Pagination,
  Icon,
  Modal,
  // Upload,
  // Form,
} from 'antd';
import ReactDOM from 'react-dom';
// import { connect } from 'dva';
// import { callbackify } from 'util';
// import { func } from 'prop-types';
import styles from './index.less';
// import { FormattedMessage } from 'umi-plugin-react/locale';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';


class PreviewPage extends Component {

  constructor() {
    super()
    this.state = {
      tabId: '',
      isLoading: true,
      imagesList: [],
      currentPage: 1,
      // eslint-disable-next-line react/no-unused-state
      previewVisible: false,
    }
    const t = this;
    const opts = {
      method: "GET",
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      },
    }
    fetch('https://seventh.chinacloudsites.cn/api/services/app/HotelPicture/GetPaged?MaxResultCount=15', opts).then(
      function (res) {
        res.json().then(function (data) {
          // console.log(data.result.items)
          t.setState({
            imagesList: [...data.result.items],
            isLoading: false,
            totalSize: data.result.totalCount
          })
          // console.log(t.state.totalSize)
        })
      }
    )
  }

  componentDidMount() {
  }

  tabClick(i) {
    this.setState({
      tabId: i,
    })
    // const tabId = i;
    // console.log(i)
    const t = this;
    // const url = 'https://seventh.chinacloudsites.cn/api/services/app/HotelPicture/GetPaged'
    const url = `https://seventh.chinacloudsites.cn/api/services/app/HotelPicture/GetPaged?PictureType=${i}&SkipCount=0&MaxResultCount=15`
    // console.log(url)
    fetch(url, {
      headers:
        // {'Content-Type': 'application/json;charset=UTF-8'}},{method:"GET"},{'':i}).then(
        { 'Content-Type': 'application/json;charset=UTF-8' }
    }, { method: "GET" }).then(
      function (res) {
        res.json().then(function (data) {
          // console.log(data.result.items)
          t.setState({
            imagesList: [...data.result.items],
            isLoading: false,
            totalSize: data.result.totalCount,
            currentPage: 1,
          })
        })
      }
    )
  }

  pageChange = (page, pageSize) => {
    const i = this.state.tabId;
    // console.log(i)
    const t = this;
    // const url = 'https://seventh.chinacloudsites.cn/api/services/app/HotelPicture/GetPaged'
    const url = `https://seventh.chinacloudsites.cn/api/services/app/HotelPicture/GetPaged?PictureType=${i}&SkipCount=${(page - 1) * 10}&MaxResultCount=15`
    // console.log(url)
    fetch(url, {
      headers:
        { 'Content-Type': 'application/json;charset=UTF-8' }
    }, { method: "GET" }).then(
      function (res) {
        res.json().then(function (data) {
          // console.log(data)
          t.setState({
            imagesList: [...data.result.items],
            isLoading: false,
            totalSize: data.result.totalCount,
            currentPage: page
          })
        })
      }
    )
  }

  deleteImage = (e) => {
    const deleteId = e.currentTarget.id;
    const imagesList = this.state.imagesList;
    // console.log(imagesList)
    const data = {
      Id: Number(deleteId)
    }
    const t = this;
    // console.log(deleteId)

    const apiUrl = `https://seventh.chinacloudsites.cn/api/services/app/HotelPicture/Delete?Id=${Number(deleteId)}`;
    fetch(apiUrl, {
      method: "DELETE",
      headers: {
        'Content-Type': 'application/json'
      },
    }).then(
      function (res) {
        res.json().then(function (data) {
          // console.log(data)
          const opts = {
            method: "GET",
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            },
          }
          fetch('https://seventh.chinacloudsites.cn/api/services/app/HotelPicture/GetPaged?MaxResultCount=15', opts).then(
            function (o) {
              o.json().then(function (data) {
                // console.log(data.result.items)
                t.setState({
                  imagesList: [...data.result.items],
                  isLoading: false,
                  totalSize: data.result.totalCount
                })
                // console.log(t.state.totalSize)
              })
            }
          )
        })
      }
    )
    // for( let i = 0; i < imagesList.length; i++){
    //   if(imagesList[i].id===Number(deleteId)){
    //     imagesList.splice(i,1)
    //     this.setState({
    //       imagesList
    //     })
    //   }
    // }
  }

  showBigImage = (e) => {
    const imagesList = this.state.imagesList;
    const previewId = e.currentTarget.dataset.id
    // console.log(previewId)
    imagesList.forEach(o => {
      if (o.id === Number(previewId)) {
        this.setState({
          previewImage: o.pictureUrl,
          previewVisible: true,
        });
      }
    })

  }

  handleCancel = () => this.setState({ previewVisible: false });

  render() {

    return (
      this.state.isLoading ? "loading" :
        <div>
          <PageHeaderWrapper
            title="图库分类"
          >
            <div>
              <Row type='flex'>
                <Col onClick={() => { this.tabClick('') }} className={this.state.tabId === '' ? styles.preTabActive : styles.preTab} xs={6} md={4} xl={2}>全部</Col>
                <Col onClick={() => { this.tabClick(0) }} className={this.state.tabId === 0 ? styles.preTabActive : styles.preTab} xs={6} md={4} xl={2}>外观</Col>
                <Col onClick={() => { this.tabClick(1) }} className={this.state.tabId === 1 ? styles.preTabActive : styles.preTab} xs={6} md={4} xl={2}>公众区域</Col>
                <Col onClick={() => { this.tabClick(2) }} className={this.state.tabId === 2 ? styles.preTabActive : styles.preTab} xs={6} md={4} xl={2}>餐厅</Col>
                <Col onClick={() => { this.tabClick(3) }} className={this.state.tabId === 3 ? styles.preTabActive : styles.preTab} xs={6} md={4} xl={2}>休闲</Col>
                <Col onClick={() => { this.tabClick(4) }} className={this.state.tabId === 4 ? styles.preTabActive : styles.preTab} xs={6} md={4} xl={2}>其他</Col>
              </Row>
              <div className={styles.preDiv}>
                {this.state.imagesList.length === 0 ? "暂无图片，请上传！" :
                  this.state.imagesList.map((item) => {
                    return (
                      <div className={styles.preImg} key={item.id}>
                        <div>
                          <img src={item.pictureUrl} />
                        </div>
                        <div className={styles.info}>

                          <span className={styles.actions}>
                            <Icon type='eye' onClick={this.showBigImage} data-id={item.id} />
                            <Icon type='delete' onClick={this.deleteImage} id={item.id} />
                          </span>
                        </div>
                      </div>

                    )

                  })
                }
              </div>
              <Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
                <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
              </Modal>
            </div>

          </PageHeaderWrapper>
          <Pagination hideOnSinglePage defaultCurrent={1} current={this.state.currentPage} total={this.state.totalSize} onChange={this.pageChange} className={styles.fenye} />
        </div>

    )


  }

}
export default PreviewPage;


